<template>
  <div class="p-4">
    <n-card title="角色管理">
      <template #header-extra>
        <n-button type="primary" @click="handleAdd">
          <template #icon>
            <n-icon><add-icon /></n-icon>
          </template>
          新增角色
        </n-button>
      </template>

      <n-data-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :pagination="pagination"
        @update:page="handlePageChange"
      />
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from "vue";
import { NTag, NButton, NSpace } from "naive-ui";
import { AddIcon, EditIcon, TrashIcon } from "@/components/Icon";

const loading = ref(false);
const pagination = ref({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30, 40],
});

const columns = [
  {
    title: "角色名称",
    key: "name",
  },
  {
    title: "角色编码",
    key: "code",
  },
  {
    title: "状态",
    key: "status",
    render(row: any) {
      return h(
        NTag,
        {
          type: row.status === "active" ? "success" : "error",
        },
        { default: () => (row.status === "active" ? "启用" : "禁用") }
      );
    },
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "操作",
    key: "actions",
    render(row: any) {
      return h(NSpace, null, {
        default: () => [
          h(
            NButton,
            {
              size: "small",
              quaternary: true,
              type: "info",
              onClick: () => handleEdit(row),
            },
            { icon: () => h(EditIcon) }
          ),
          h(
            NButton,
            {
              size: "small",
              quaternary: true,
              type: "error",
              onClick: () => handleDelete(row),
            },
            { icon: () => h(TrashIcon) }
          ),
        ],
      });
    },
  },
];

const tableData = ref([
  {
    id: 1,
    name: "超级管理员",
    code: "SUPER_ADMIN",
    status: "active",
    createTime: "2024-01-01 12:00:00",
  },
  {
    id: 2,
    name: "普通用户",
    code: "USER",
    status: "active",
    createTime: "2024-01-01 12:00:00",
  },
]);

const handlePageChange = (page: number) => {
  pagination.value.page = page;
};

const handleAdd = () => {
  // TODO: 实现新增逻辑
};

const handleEdit = (row: any) => {
  // TODO: 实现编辑逻辑
};

const handleDelete = (row: any) => {
  // TODO: 实现删除逻辑
};
</script>
